<script lang="tsx" setup>
/**
 * 设备列表
 */

import {ref, watch} from "vue"
import {DeviceStateEnum} from "@/pages/data-cockpit/components/device-state/index.ts"

/**
 * 定义props
 */
const props = defineProps<{
  deviceStateData: any
}>()

/**
 * 设备列表
 */
const list: any = ref(
    [
      {
        name: 'A01',
        rate: 80,
        status: DeviceStateEnum.运行
      },
      {
        name: 'A02',
        rate: 81,
        status: DeviceStateEnum.运行
      },
      {
        name: 'A03',
        rate: 84,
        status: DeviceStateEnum.运行
      },
      {
        name: 'A04',
        rate: 67,
        status: DeviceStateEnum.运行
      },
      {
        name: 'A05',
        rate: 0,
        status: DeviceStateEnum.关机
      },
      {
        name: 'A06',
        rate: 0,
        status: DeviceStateEnum.关机
      },
      {
        name: 'A07',
        rate: 55,
        status: DeviceStateEnum.闲置
      },
      {
        name: 'A08',
        rate: 54,
        status: DeviceStateEnum.闲置
      },
      {
        name: 'A09',
        rate: 75,
        status: DeviceStateEnum.运行
      },
      {
        name: 'A10',
        rate: 74,
        status: DeviceStateEnum.运行
      },
      {
        name: 'A11',
        rate: 65,
        status: DeviceStateEnum.运行
      },
      {
        name: 'A12',
        rate: 65,
        status: DeviceStateEnum.运行
      },
      {
        name: 'A13',
        rate: 78,
        status: DeviceStateEnum.运行
      },
      {
        name: 'A14',
        rate: 78,
        status: DeviceStateEnum.运行
      },
      {
        name: 'B15',
        rate: 65,
        status: DeviceStateEnum.运行
      },
      {
        name: 'B16',
        rate: 68,
        status: DeviceStateEnum.运行
      },
      {
        name: 'B17',
        rate: 80,
        status: DeviceStateEnum.运行
      },
      {
        name: 'B18',
        rate: 60,
        status: DeviceStateEnum.故障
      },
      {
        name: 'B19',
        rate: 60,
        status: DeviceStateEnum.闲置
      },
      {
        name: 'B20',
        rate: 85,
        status: DeviceStateEnum.运行
      },
      {
        name: 'B21',
        rate: 85,
        status: DeviceStateEnum.运行
      },
      {
        name: 'B22',
        rate: 77,
        status: DeviceStateEnum.运行
      },
      {
        name: 'B23',
        rate: 77,
        status: DeviceStateEnum.运行
      },
      {
        name: 'B24',
        rate: 57,
        status: DeviceStateEnum.闲置
      },
      {
        name: 'B25',
        rate: 80,
        status: DeviceStateEnum.运行
      },
      {
        name: 'B26',
        rate: 63,
        status: DeviceStateEnum.闲置
      },
      {
        name: 'B27',
        rate: 75,
        status: DeviceStateEnum.运行
      },
      {
        name: 'B28',
        rate: 60,
        status: DeviceStateEnum.闲置
      }
    ])

/**
 * 监视
 */
watch(() => props.deviceStateData, (newValue) => {
  if (newValue) {
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <div class="device-state">
    <div class="list">
      <div v-for="(item,index) in list" :key="index"
           :class="{'item-idle':item.status === DeviceStateEnum.闲置,'item-run':item.status === DeviceStateEnum.运行,'item-correct':item.status === DeviceStateEnum.校正,'item-close':item.status === DeviceStateEnum.关机}"
           class="item">
        <div class="item-block">
          <div class="item-block-data">{{ item.rate }}%</div>
          <div :style="{'height':item.rate * 161 / 100 + 'rem'}" class="item-block-inner">
          </div>
        </div>
        <div class="item-code">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>